import React, { useState } from 'react';
import { history, connect } from 'umi';
import { Space, Empty } from 'antd';
import TableDataBlock from '@/components/TableDataBlock';
import { Button, Card, Space, Segmented, Radio, Pagination, Spin, Form } from 'antd';
import SearchCondition from '@/components/SearchCondition';
import PopImgShow from '@/components/PopImgShow';
export default (props) => {
  const { contentType } = props;
  const [form] = Form.useForm();
  const [tableList, setTableList] = useState({ list: [], total: 0 });
  const { list, total } = tableList;
  const [params, setParams] = useState({
    searchType: 'my',
    contentType: contentType,
    status: '1',
    openFlag: '1',
  });
  const [page, setPage] = useState({
    page: 1,
    limit: 10,
  });
  const searchItems = [
    { label: '关键词', name: 'keyword' },
    {
      label: '资源渠道',
      name: 'channel',
      type: 'select',
      select: {
        self: '自己制作',
        other: '其他渠道',
      },
    },
  ];
  const [searchParams, setSearchParams] = useState({
    contentType: 'video',
  });
  const getColumns = [
    {
      title: '作品名称',
      dataIndex: 'creationName',
    },
    {
      title: '分类名称',
      dataIndex: 'categoryName',
    },
    {
      title: '资源渠道',
      dataIndex: 'channel',
      render: (e) => {
        return {
          self: '自己制作',
          other: '其他渠道',
        }[e];
      },
    },
    {
      title: '抖音发布次数',
      dataIndex: 'douyinUseAmount',
      render: (e, record) => {
        return (
          <Button
            onClick={() =>
              setVisibleAccount({
                show: true,
                detail: { platform: 'douyin', materialId: record.id },
                contentType: record.contentType,
              })
            }
            type="link"
          >
            {e}
          </Button>
        );
      },
    },
    {
      title: '小红书发布次数',
      dataIndex: 'xiaohongshuUseAmount',
      render: (e, record) => {
        return (
          <Button
            onClick={() =>
              setVisibleAccount({
                show: true,
                detail: { platform: 'xiaohongshu', materialId: record.id },
                contentType: record.contentType,
              })
            }
            type="link"
          >
            {e}
          </Button>
        );
      },
    },
    {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '查看详情',
          auth: true,
          type: 'edit',
          click: () =>
            dispatch({
              type: 'redBooklet/fetchCreationDetail',
              payload: { creationId: val },
              callback: (e) => {
                setVisibleDetails({
                  show: true,
                  details: e,
                });
              },
            }),
        },
      ],
    },
  ];
  const fetchData = () => {
    dispatch({
      type: 'classification/fetchPublishCreation',
      payload: {
        ...searchParams,
        ...params,
        ...page,
      },
      callback: (e) => {
        setTableList(e);
      },
    });
  };
  useUpdateEffect(() => {
    fetchData();
  }, [page]);
  return (
    <div style={{ marginTop: 12 }}>
      <SearchCondition
        form={form}
        handleSearch={(e) => {
          setPage(() => {
            setSearchParams(e);
            return {
              page: 1,
              limit: 10,
            };
          });
        }}
        searchItems={searchItems}
      ></SearchCondition>
      <TableDataBlock
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        list={list}
        pagination={false}
      ></TableDataBlock>
      <div style={{ textAlign: 'center', marginTop: '12px' }}>
        <Pagination
          current={page.page}
          pageSize={10}
          onChange={(e) => {
            setPage({
              ...page,
              page: e,
            });
          }}
          total={total}
        ></Pagination>
      </div>
    </div>
  );
};
